<template>
    <el-dialog title="选择用户" destroy-on-close append-to-body :visible.sync="visible">
        <div class="ec-dailog-body">
            <el-select v-model="dataForm.pkOrgs" placeholder="请选择组织"
                style="width:28%;margin-bottom:15px;margin-right:2%;" @change="refreshData">
                <el-option v-for="item in orgsoptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="refreshData" style="width:10%;margin-bottom:15px;">
                刷新</el-button>

            <el-transfer style="width:100%;" filterable :titles="title" :props="{key:'id',label: 'name'}"
                filter-placeholder="快速筛选" v-model="toData" :data="usersData" :filter-method="filterMethod">
            </el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    // import treeTransfer from 'el-tree-transfer' // 引入
    import * as usergroupService from '@/api/upms/usergroup'
    import * as orgService from '@/api/upms/org'
    import * as userroleService from '@/api/upms/userrole'
    import * as userService from '@/api/upms/user'
    import * as userUsergroupService from '@/api/upms/userusergroup'
    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    pkOrgs: '',
                    pkUsergroup: '',
                    userIds: []
                },
                title: ['未选择用户列表', '已选择用户列表'],
                mode: "transfer",
                usersData: [],
                toData: [],
                orgsoptions: [],
                filterMethod(query, item) {
                    return item.name.indexOf(query) > -1;
                }
            }
        },
        components: {
            // treeTransfer
        }, // 注册
        methods: {
            init(id) {
                this.visible = true
                this.dataForm.pkUsergroup = id;
                this.$nextTick(() => {
                    if (this.dataForm.pkUsergroup) {
                        // 默认加载组织列表
                        orgService.getorglistdict().then(data => {
                            this.orgsoptions = data
                            this.dataForm.pkOrgs = data[0].id
                            this.refreshData();
                        })
                        // 默认加载已分配该角色的用户列表
                        userUsergroupService.getUserByUsergroupId(this.dataForm.pkUsergroup).then(data => {
                            data.map((value, key) => {
                                this.toData.push(value.id)
                            })
                        })
                    }
                })
            },
            submit() {
                this.dataForm.userIds = []
                this.dataForm.userIds = this.toData
                userUsergroupService.adduserusergroup(this.dataForm).then(data => {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.visible = false
                            this.$emit('refreshDataList')
                        }
                    })
                })
            },
            refreshData() {
                // 组织下的用户列表
                userService.getuserlistByOrgs(this.dataForm.pkOrgs).then(data => {
                    this.usersData = data
                })
            }
        }
    }
</script>